<script setup>
import {onMounted, ref} from "vue";
import {Edit, Plus, Refresh, Search} from "@element-plus/icons-vue";
import ConfigFormDialog from "./component/Form.vue"
import { add, edit, pageList, deleteById }  from '@/api/system/config.js'

defineOptions({
  name: '/system/config'
})

const search = ref({
  name: "",
  keyName: "",
  pageNum: 1,
  pageSize: 10,
  total: 0
})

const searchFormRef = ref(null)

const config = ref({
  id: "",
  name: "",
  keyName: "",
  content: "",
  remark: "",
  createTime: "",
})

const configData = ref([
  {id:1, name: "管理员用户-重置密码", keyName: "system.adminUser.initPassword", content: "123456", remark: "管理员用户重置密码后的默认密码", createTime: "2024-07-19 11:05:00"}
])

const configFormDialogVisible = ref(false)

//分页请求
const requestPageList = () => {
  pageList(search.value).then(resp => {
    search.value.pageNum = Number.parseInt(resp.data.total)
    configData.value = resp.data.data
  })
}

//初始化
onMounted(() => {
  requestPageList()
})

const onReset = () => {
  searchFormRef.value.resetFields()
  search.value.pageNum = 1
  requestPageList()
}

const onSearch = () => {
  requestPageList()
}

const onAdd = () => {
  configFormDialogVisible.value = true
}

const onEdit = (rowData) => {
  config.value = {...rowData}
  configFormDialogVisible.value = true
}

const handleCurrentChange = (currentPage) => {
  search.value.pageNum = currentPage
  requestPageList()
}

const handleDialogFormConfirm = async (data) => {
  if (data.id) {
    await edit(data)
  } else {
    await add(data)
  }
  requestPageList()
  configFormDialogVisible.value = false
}
</script>

<template>
  <div class="cb-main-container">
    <div class="cb-common-box search-box">
      <el-form :model="search" inline ref="searchFormRef" size="large">
        <el-form-item prop="name" label="名称">
          <el-input v-model="search.name" placeholder="请输入配置名称" />
        </el-form-item>
        <el-form-item prop="keyName" label="键名">
          <el-input v-model="search.keyName" placeholder="请输入配置键名" />
        </el-form-item>
        <el-form-item>
          <el-button icon="Refresh" @click="onReset">重置</el-button>
          <el-button type="primary" icon="Search" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="cb-common-box main-box">
      <div>
        <el-button type="primary" icon="Plus" @click="onAdd">新增</el-button>
      </div>
      <el-table :data="configData" size="large" class="cb-table-box" empty-text="暂无数据">
        <el-table-column type="index" label="ID"/>
        <el-table-column property="name" label="名称" />
        <el-table-column property="keyName" label="键名" />
        <el-table-column property="content" label="内容" show-overflow-tooltip />
        <el-table-column property="remark" show-overflow-tooltip label="备注" />
        <el-table-column property="createTime" label="创建时间" />
        <el-table-column align="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="onEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="search.total" :current-page="search.pageNum" style="margin-top: 16px" @current-change="handleCurrentChange" />
    </div>
  </div>

  <!-- 配置表单-START -->
  <config-form-dialog v-model:visible="configFormDialogVisible" @confirm="handleDialogFormConfirm" :data="config"></config-form-dialog>
  <!-- 配置表单-END -->
</template>

<style scoped lang="scss">
.cb-main-container {
  flex-direction: column;
}
</style>
